<template>
<!--    头部-->
    <el-header class="_header" style="height: 80px">
        <div class="left">
        <!--左侧-->
            <ul>
<!--                navChangeShow点击图标展开左侧内容-->
                <li class="collapse-btn" @click="navChangeShow">
                    <i class="el-icon-menu"></i>
                </li>
                <li class="nohover">自动化平台</li>
            </ul>
        </div>


        <div class="right">
            <ul>
<!--            显示职位-->
                <li class="nohover">角色:  {{position}} </li>
<!--            图标 is-fullscreen 可以用-->
                <li >
<!--                    handleFullScreen 全屏-->
                    <i class="el-icon-rank is-fullscreen" @click="handleFullScreen">全屏</i>
                </li>

                <li>
                    <i class="el-icon-bell notice"></i>
                </li>

                <li>
                    <el-dropdown class="white font" trigger="click" placement="bottom" @command="handleCommand" >
                        <span class="el-dropdown" style="color: #f2f6fc">
                            {{username}}
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
<!--                        右上角，用户名↓下拉框-->
                            <el-dropdown-item command="about">bilibili</el-dropdown-item>
                            <a href="http://www.baidu.com" target="_blank">
                               <el-dropdown-item>博客地址</el-dropdown-item>
                            </a>
                            <el-dropdown-item command="loginout">退出登陆</el-dropdown-item>
                         </el-dropdown-menu>
                    </el-dropdown>
                </li>
            </ul>
        </div>

    </el-header>
</template>

<script>
    import bus from "../common/bus";

    export default {
        name: "header.vue",
        data(){
            return{
               navShow: false, //左侧导航是否折叠
               fullscreen: false, //全屏
                position:'职位',//职位
                username:'用户名',//用户名
            }
        },
        // 狗子函数 mounted 页面初始化完成后，对DOM节点进行操作
        mounted() {
            if(sessionStorage.getItem("position") == 1){
                this.position="老大vip"
            }
            if(sessionStorage.getItem("position") == 2){
                this.position="老二"
            }
            if(sessionStorage.getItem("position") == 3){
                this.position="小弟"
            }
        },
        methods:{
            // 展示左侧菜单栏
            navChangeShow(){
            this.navShow = !this.navShow;
            // 发出属于，等待别人接受
            bus.$emit("navShowChange", this.navShow);
            },
            // 全屏
            handleFullScreen() {
               let element = document.documentElement;
                if(this.fullscreen){
                    // 如果已经全屏
                    if (document.exitFullscreen){
                        document.exitFullscreen(); // 关闭全屏
                    }else if (document.webkitCancelFullScreen) { // 兼容多个浏览器
                    document.webkitCancelFullScreen();
                    } else if (document.mozCancelFullScreen) {
                         document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                         document.msExitFullscreen();
                    }
                }
                else {
                    if(element.requestFullscreen){
                        element.requestFullscreen();
                    }
                    else if(element.webkitRequestFullScreen){
                        console.log("兼容浏览器")
                        element.webkitRequestFullScreen()
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
                    } else if (element.msRequestFullscreen) {
                        // IE11
                        element.msRequestFullscreen();
                    }
                }
                this.fullscreen = !this.fullscreen;
            },
            // 下拉框
            handleCommand(command){
            if(command=='loginout'){
                sessionStorage.removeItem('tokoen');
                sessionStorage.removeItem('uuid');
                sessionStorage.removeItem('position');
                sessionStorage.removeItem('uname');
                this.$router.replace('/login'); // 替换当前路由,与history有区别
            }
            else if (command=='about'){
                this.$message('作者---');
            }
            }
        }
    };
</script>

<style lang="scss" scoped>
._header {
  padding: 0px;
  background-color: #409eff;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  color: white;
  ul {
    list-style: none;
    li {
      float: left;
      line-height: 60px;
      height: 60px;
      text-align: center;
      padding: 0 10px;
      cursor: pointer;
    }
    li:hover {
      background-color: #337ecc;
    }
    i {
      line-height: 60px;
    }
  }
  .nohover {
    pointer-events: none; //禁用hover
  }
  .left {
    .collapse-btn {
      width: 45px;
    }
    .title {
      font-size: 18px;
    }
  }
  .right {
    margin-right: 60px;
    .notice {
      width: 40px;
    }
    .el-dropdown-link {
      color: white;
      padding: 22px 0px;
    }
  }
}
</style>